<!doctype html>
<html lang="en">
<head>
<meta content="text/html;" http-equiv="content-type" charset="utf-8">
<title><?php echo $page_title?></title>
<link rel="stylesheet" type="text/css"
	href="<?php echo base_url(); ?>css/nuevo_pass.css">
<style>
#enviar {
	border: 0;
	border-radius: 4px;
	color: #fff;
	display: block;
	font-size: 13px;
	margin-right: 0.4em;
	padding: 7px;
	background: #d14836;
}

.textbox {
	border: 1px solid #DBE1EB;
	font-size: 18px;
	font-family: Arial, Verdana;
	padding-left: 7px;
	padding-right: 7px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	background: #FFFFFF;
	background: linear-gradient(left, #FFFFFF, #F7F9FA);
	background: -moz-linear-gradient(left, #FFFFFF, #F7F9FA);
	background: -webkit-linear-gradient(left, #FFFFFF, #F7F9FA);
	background: -o-linear-gradient(left, #FFFFFF, #F7F9FA);
	color: #2E3133;
}

.textbox:focus {
	color: #2E3133;
	border-color: #FBFFAD;
}
</style>
</head>
<body>
	<div class="flex-container">
		<div>
			<img class="barra"
				src="<?php echo base_url();?>images/repuestock.png" />
		</div>
		<div>
			<img class="barra" src="<?php echo base_url();?>images/red.png" />
		</div>
	</div>
	<div class="Absolute-Center is-Fixed">
		<form id="myform" name="myform"
			action="<?php echo base_url(); ?>index.php/login/insertar"
			method="POST">
			<h1 style="color: red;">
					<b><?php if (!empty($mail)){echo $mail;}else {echo '<label style="color: red;">No Existe email</label></br>';}?></b>
				</h1>
				<p>Por favor, introduzca su usuario y su nueva contrase&ntilde;a :</p>
			<label for="username">Usuario <strong style="color: red;">*</strong></label>
			<br>
			<input readonly="readonly" type="text" name="username" id="username" placeholder="Nombre de usuario" value="<?php if (isset($username)){echo$username;}else {echo '';}?>"><br><br>
			<label for="password">Nueva contrase&ntilde;a <strong style="color: red;">*</strong></label>
			<br> 
			<input type="password" pattern="[a-zA-Z0-9]+"
					size="60" maxlength="60" placeholder="Nueva contrase&ntilde;a"
				id="password" name="password" /> <br /><br/>
			<label for="password_again">Confirmar contrase&ntilde;a <strong style="color: red;">*</strong></label>
			<br>
			<input type="password" class="left" id="password_again" pattern="[a-zA-Z0-9]+"
					size="60" maxlength="60" placeholder="Confirmar contrase&ntilde;a"
				name="password_again" /> <br>
			<label style="color: red;"><i>* &nbsp;&nbsp;&nbsp; Campos Obligatorios</i></label>
			<br><br>
			<input type="submit" name="enviar"
				id="enviar" value=">> Enviar"><br>
			<div id="mensaje" style="color: red;">
				<?php if (isset($mensaje)){echo $mensaje;}else {echo '';}?>
			</div>
		</form>
	</div>
	<script src="<?php echo base_url();?>js/jquery-1.11.1.min.js"></script>
	<script src="<?php echo base_url();?>js/jquery.validate.min.js"></script>
	<script src="<?php echo base_url();?>js/additional-methods.min.js"></script>

	<script type="text/javascript">
 $(document).ready(function() {	 
	 jQuery.extend(jQuery.validator.messages, {
	   required: "Este campo es obligatorio.",
	   remote: "Por favor, rellena este campo.",
	   email: "Por favor, escribe una dirección de correo válida",
	   url: "Por favor, escribe una URL válida.",
	   date: "Por favor, escribe una fecha válida.",
	   dateISO: "Por favor, escribe una fecha (ISO) válida.",
	   number: "Por favor, escribe un número entero válido.",
	   digits: "Por favor, escribe sólo dígitos.",
	   creditcard: "Por favor, escribe un número de tarjeta válido.",
	   equalTo: "Por favor, escribe el mismo valor de nuevo.",
	   accept: "Por favor, escribe un valor con una extensión aceptada.",
	   maxlength: jQuery.validator.format("Por favor, no escribas más de {0} caracteres."),
	   minlength: jQuery.validator.format("Por favor, no escribas menos de {0} caracteres."),
	   rangelength: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1} caracteres."),
	   range: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1}."),
	   max: jQuery.validator.format("Por favor, escribe un valor menor o igual a {0}."),
	   min: jQuery.validator.format("Por favor, escribe un valor mayor o igual a {0}.")
	 });
 });
 </script>
	<script>
$( "#myform" ).validate({
	debug: true,
	success: "valid",
  rules: {
	username: "required",
    password: "required",
    password_again: {
      equalTo: "#password"
    }
  },
  submitHandler : function(form) {	  
	  form.submit();
	  
  }
});
</script>
</body>
</html>